<template>
	<div style="background-color: #f4fafe;">
		<div class="main">考试统计</div>
		<div class="main_content">
			<span @click="Change(1)" :class="{active:active==1}">成绩统计</span>
			<el-divider direction="vertical"></el-divider><span @click="Change(2)" :class="{active:active==2}">学员分析</span>
			<el-divider direction="vertical"></el-divider><span @click="Change(3)" :class="{active:active==3}">试题分析</span>
			<div style="margin-top: 1.25rem;" v-show="active==3">

				<!-- 成绩的统计 -->
				<div id="GrideChart" style="width: 1404px;height: 500px;"></div>
				<div style="height: 3.875rem;line-height:3.875rem;margin-left: 10px;fontSize: 16;fontFamily: '黑体'; color:#5a5a5a
				font-weight: 600;">主观题统计
				</div>
				<div class="mark_task">
					<div class="mark_task_title">一. 简答题（共 1 题，100 分）</div>
					<div class="mark_item questionItem">
						<h3 class="mark_name colorDeep">1.<span class="colorShallow">(简答题 , 100分)</span></h3>
						<p><span style="background-color: rgb(255, 255, 255); color: rgb(32, 32, 32); font-family: 'Microsoft Yahei,Arial, Helvetica, sans-serif'; font-size: 14px;">以学生表、课程表、选课表为例，写出下列查询语句：</span></p>
						<p><span style="background-color: rgb(255, 255, 255); color: rgb(32, 32, 32); font-family: 'Microsoft Yahei,Arial, Helvetica, sans-serif'; font-size: 14px;">1:查询选修了“数学”课程的学生中，分数低于60的学生的学号、姓名和成绩，并按成绩降序排列显示。</span></p>
						<p><span style="background-color: rgb(255, 255, 255); color: rgb(32, 32, 32); font-family: 'Microsoft Yahei,Arial, Helvetica, sans-serif'; font-size: 14px;">2:以学生表、课程表、选课表为例，写出下列查询语句：</span></p>
						<p><span style="background-color: rgb(255, 255, 255); color: rgb(32, 32, 32); font-family: 'Microsoft Yahei,Arial, Helvetica, sans-serif'; font-size: 14px;">3:查询选修了“数学”课程的学生中，分数低于60的学生的学号、姓名和成绩，并按成绩降序排列显示。</span></p>
						<p><span style="background-color: rgb(255, 255, 255); color: rgb(32, 32, 32); font-family: 'Microsoft Yahei,Arial, Helvetica, sans-serif'; font-size: 14px;">4:以学生表、课程表、选课表为例，写出下列查询语句：</span></p>
						<p><span style="background-color: rgb(255, 255, 255); color: rgb(32, 32, 32); font-family: 'Microsoft Yahei,Arial, Helvetica, sans-serif'; font-size: 14px;">5:以学生表、课程表、选课表为例，写出下列查询语句：</span></p>
						<p><span style="background-color: rgb(255, 255, 255); color: rgb(32, 32, 32); font-family: 'Microsoft Yahei,Arial, Helvetica, sans-serif'; font-size: 14px;">6:以学生表、课程表、选课表为例，写出下列查询语句：查询选修了“数学”课程的学生中，分数低于60的学生的学号、姓名和成绩，并按成绩降序排列显示。</span></p>
						<p><span style="background-color: rgb(255, 255, 255); color: rgb(32, 32, 32); font-family: 'Microsoft Yahei,Arial, Helvetica, sans-serif'; font-size: 14px;">7:以学生表、课程表、选课表为例，写出下列查询语句：</span></p>
						<p><span style="background-color: rgb(255, 255, 255); color: rgb(32, 32, 32); font-family: 'Microsoft Yahei,Arial, Helvetica, sans-serif'; font-size: 14px;">8:以学生表、课程表、选课表为例，写出下列查询语句：</span></p>
						<p><span style="background-color: rgb(255, 255, 255); color: rgb(32, 32, 32); font-family: 'Microsoft Yahei,Arial, Helvetica, sans-serif'; font-size: 14px;">9:以学生表、课程表、选课表为例，写出下列查询语句：</span></p>
					</div>
				</div>
				<div class="mark_task_answer">
					<span class="fl fontWeight">答案：</span>
				</div>
				<div class="mark_task_more">
					<div class="mark_rate fl">
						<span class="fontWeight">主观题得分：</span>
						<a class="colorBlue pointer">14.1</a>
					</div>
					<div class="mark_rate fl">
						<div class="fontWeight" style="color: #ffaa00;"><i class="el-icon-pie-chart"></i>统计详情</div>
					</div>

				</div>
			</div>
			<div style="margin-top: 1.25rem;" v-show="active==1">
				<div class="fanyaMarking_TaskData TiMu">

					<div class="ksmark_title">
						能力测试1 SQL查询1
					</div>
					<a class="ksExport fr"><i class="el-icon-download"></i>导出统计详情</a>
					<a class="ksExport fr"><i class="el-icon-download"></i>导出答题详情</a>
				</div>
				<div class="fullScore">
					<span class="fullScore_row">题量: 1</span>
					<span class="fullScore_row">满分:100</span>
				</div>

				<!-- x是分数
				y表示分数的人数 -->
				<div id="myChart" :style="{width: '100%',height: '500px'}" style="margin-top:2.25rem;"></div>
			</div>

			<div style="margin-top: 1.25rem;" v-show="active==2">
				<div>
					<div class="ksmark_title" style="margin-top: 0.625rem;fontSize: 16;fontFamily: '黑体'; color:#5a5a5a">
						学员信息
					</div>
					<div class="middle">
						<div>
							筛选学员：
							<el-select v-model="value" placeholder="请选择角色" @change="Changeselect">
								<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>

						</div>

					</div>
					<div style="overflow: scroll;height: 30rem;">
						<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
							<el-table-column prop="name" label="姓名">

							</el-table-column>
							<el-table-column prop="address" label="学号" show-overflow-tooltip>
							</el-table-column>
							<el-table-column label="班级" prop="name">
							</el-table-column>
							<el-table-column label="提交时间">
								<template slot-scope="scope">{{ scope.row.date }}</template>
							</el-table-column>

							<el-table-column prop="name" label="答题时长">
							</el-table-column>
							<el-table-column prop="address" label="成绩" show-overflow-tooltip>

							</el-table-column>
							<el-table-column prop="address" label="结果" show-overflow-tooltip>
							</el-table-column>
							<el-table-column fixed="right" label="操作" width="220">
								<template slot-scope="scope">
									<el-button style="background-color:#03d3bd;color: white;" size="mini" @click="testStatistics()">详情</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import * as echarts from 'echarts'

	export default {
		name: 'allorders',
		data() {
			return {
				active: 1,
				tableData: [{
						date: '2016-05-03',
						name: '王小虎',
						address: '2018401322'
					}, {
						date: '2016-05-02',
						name: '王小虎',
						address: '2018401322'
					}, {
						date: '2016-05-04',
						name: '王小虎',
						address: '2018401322'
					}, {
						date: '2016-05-01',
						name: '王小虎',
						address: '2018401322'
					}, {
						date: '2016-05-08',
						name: '王小虎',
						address: '2018401322'
					}, {
						date: '2016-05-06',
						name: '王小虎',
						address: '2018401322'
					}, {
						date: '2016-05-07',
						name: '王小虎',
						address: '2018401322'
					},
					{
						date: '2016-05-04',
						name: '王小虎',
						address: '2018401322'
					}, {
						date: '2016-05-01',
						name: '王小虎',
						address: '2018401322'
					}, {
						date: '2016-05-08',
						name: '王小虎',
						address: '2018401322'
					}, {
						date: '2016-05-06',
						name: '王小虎',
						address: '2018401322'
					}, {
						date: '2016-05-07',
						name: '王小虎',
						address: '2018401322'
					}
				],
				options: [{
					label: "全部",
					value: 2
				}, {
					label: "及格",
					value: 1

				}, {
					label: "不及格",
					value: 3

				}, {
					label: "已考",
					value: 4

				}, {
					label: "漏考",
					value: 5

				}],
				value: "全部"


			}
		},
		mounted() {
			this.drawLine();
			this.drawGrideChart();
		},
		methods: {
			drawLine() {
				let myChart = this.$echarts.init(document.getElementById('myChart'));
				var option = {
					color: ['#fec37f', '#9ce6b6'],
					title: {
						text: '分数分布',
						left: 'left',
						textStyle: { //设置主标题
							fontSize: 16, //设置主标题的字号大小
							fontFamily: "黑体", //设置主标题的字体
							color: "#5a5a5a" //设置主标题的颜色为深兰花色
						},
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'line',
							backgroundColor: '#f3f3f3'
						}
					},
					legend: {
						data: ['用户数'],
						top: 30,
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'value',
						boundaryGap: [0, 0.01]
					},
					yAxis: {
						type: 'category',
						data: ['0-59分', '60-79分', '80-99分', '100分']
					},
					series: [{
						type: 'bar',
						name: 44, //'用户数',
						barWidth: 30, //设置柱子宽度
						data: [8, 10, 21, 5],
						label: { //设置柱状图上显示  对应值
							show: true,
							position: 'right',
							color: '#bcbcbc'
						},
						itemStyle: {
							normal: {
								color: function(params) { // 设置前三个颜色不一样
									var num = params.value;
									var djg = params.dataIndex; //第几个数
									var retcoler = "#fe9f7f";
									if (djg == 1) {
										retcoler = '#adffca';
									}
									if (djg == 2) {
										retcoler = '#90d4a8';
									}
									if (djg == 3) {
										retcoler = '#ffaa7f';
									}
									return retcoler
								},
								// barBorderRadius: [0, 8, 8, 0] // 设置柱状图圆角（顺时针左上，右上，右下，左下）
							},
						}

					}]
				}

				myChart.setOption(option);
			},
			drawGrideChart() {
				let myChart = this.$echarts.init(document.getElementById('GrideChart'));
				var options = {
					title: {
						text: '客观题统计',
						left: 'left',
						textStyle: { //设置主标题
							fontSize: 16, //设置主标题的字号大小
							fontFamily: "黑体", //设置主标题的字体
							color: "#5a5a5a" //设置主标题的颜色为深兰花色
						},
					},
					xAxis: {
						type: 'category',
						data: ["1题", "2题", "3题", "4题", "5题", "6题", "7题", "8题", "9题"]
					},
					yAxis: {
						type: 'value',
						data: ['0-59分', '60-79分', '80-99分', '100分']
					},
					series: [{
						data: [120, 200, 150, 80, 70, 110, 130, 50, 100, 40],
						type: 'bar',
						barWidth: 30, //设置柱子宽度
						label: { //设置柱状图上显示  对应值
							show: true,
							position: 'top',
							color: '#bcbcbc'
						},
						itemStyle: {
							color: function(params) {
								var index = params.dataIndex;
								//注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
								var colorList = ['#ffaa7f', '#90d4a8', '#adffca', '#ef9171', '#91c7ae', '#749f83', '#f5a029'];
								if (params.dataIndex >= colorList.length) {
									index = params.dataIndex - colorList.length;
								}
								return colorList[index];

							}
						}
					}]
				};
				myChart.setOption(options);
			},
			Change(val) {
				this.active = val;
			},
			testStatistics() {
				this.$router.push('/testStatistics');
			}
		}
	}
</script>


<style scoped="scoped">
	.main {
		width: 100%;
		height: 4.25rem;
		line-height: 4.25rem;
		font-size: 1.25rem;
		font-weight: 18.75;
		/* display: flex;
		justify-content: space-between; */
		color: white;
		text-align: center;
		cursor: pointer;
		background-color: #03d3bd;
	}


	.main_content {
		margin-left: 3%;
		margin-right: 3%;
		cursor: pointer;
		/* margin-top: 1.25rem; */
		padding: 1.25rem;
		/* height: 100vh; */
		background-color: white;
	}

	.ksmark_title {
		width: 964px;
		line-height: 25px;
		padding: 30px 10px 0;
		font-size: 20px;
		color: #181E33;
		font-weight: bold;
	}

	.fullScore {
		line-height: 20px;
		margin: 10px 10px 0;
		font-size: 14px;
		color: #A8A8B3;
	}

	.fullScore_row {
		margin-right: 20px;
	}

	.fanyaMarking_TaskData {
		display: flex;
		justify-content: space-between;
		margin-bottom: 1.25rem;
	}

	.ksExport {
		line-height: 20px;
		font-size: 14px;
		color: #91A0B5;
		margin: 33px 40px 0 0;
	}

	.middle {
		/* border: 1px solid; */
		height: 40px;
		font-size: 0.875rem;
		margin-top: 20px;
		margin-bottom: 20px;
		display: flex;
		justify-content: space-between;
	}

	/* 设置滚动条的样式 */
	::-webkit-scrollbar {
		width: 5px;
	}

	/* 滚动槽 */
	::-webkit-scrollbar-track {
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
		border-radius: 5px;
	}

	/* 滚动条滑块 */
	::-webkit-scrollbar-thumb {
		border-radius: 10px;
		background: rgba(0, 0, 0, 0.1);
		-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5);
	}

	::-webkit-scrollbar-thumb:window-inactive {
		background: rgba(236, 246, 255, 0.4);
	}

	.mark_task_title {
		padding: 0 40px 20px;
		line-height: 22px;
		font-size: 16px;
		color: #181E33;
		font-weight: 600;
	}


	.mark_task .mark_item {
		margin-bottom: 40px;
	}

	.mark_task p {
		margin-top: 0.625rem;
	}

	.mark_item {
		margin: 0 20px;
		font-size: 14px;
	}

	.mark_name {
		line-height: 20px;
		margin: 0 20px;
		font-size: 14px;
	}

	.colorDeep {
		color: #131B26;
	}

	.colorShallow {
		color: #8A8B99;
	}

	.fontWeight {
		font-weight: 600;
	}

	.mark_task_answer {
		margin-top: 16px;
		padding: 0 20px 0 20px;
		line-height: 20px;
		font-size: 14px;
		color: #181E33;
		position: relative;
	}

	.mark_task_more {
		height: 52px;
		line-height: 52px;
		padding: 0 20px;
		margin-top: 20px;
		background: #F7FAFC;
		font-size: 14px;
		color: #181E33;
		border-radius: 4px;
		display: flex;
		justify-content: space-between;
	}

	.mark_rate {
		width: 246px;
	}

	.fontWeight {
		font-weight: 600;
	}

	.mark_rate_width {
		width: 60px;
		height: 12px;
		background: #E6EFFA;
		border-radius: 12px;
		display: inline-block;
		overflow: hidden;
		margin: 0 10px 2px 8px;
		vertical-align: middle;
	}

	.fontWeight {
		font-weight: 600;
	}

	.colorBlue {
		color: #00DBCF;
	}

	.pointer {
		cursor: pointer;
	}

	.active {
		font-size: 1.125rem;
		color: #03d3bd;
		font-weight: 600;
	}
</style>
